<template>
  <div class="address-edit">
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-set-default
      show-search-result
      :search-result="searchResult"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import { Toast, AddressEdit } from 'vant'
import dist from '../../common/dist'
export default {
  components: {
    [AddressEdit.name]: AddressEdit
  },
  data () {
    this.areaList = dist
    return {
      addressInfo: {},
      searchResult: []
    }
  },

  created () {
    if (this.$route.params.id) {
      this.axios
        .get('/user/address/' + this.$route.params.id)
        .then(response => {
          if (response.data) {
            this.addressInfo = response.data
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },

  methods: {
    onSave (info) {
      let path = '/user/address/create'
      if (info.id) {
        path = '/user/address/update?id=' + info.id
      }
      this.axios
        .post(path, info)
        .then(response => {
          this.$router.go(-1)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onDelete () {
      Toast('delete')
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '济宁市任城区',
            address: '优越定制工厂'
          }
        ]
      } else {
        this.searchResult = []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.address-edit {
  /deep/ .van-cell-group {
    background: transparent;
  }
  /deep/ .van-cell {
    padding: 15px;
    font-size: 14px;
  }
  /deep/ .van-cell:not(:last-child)::after {
    left: 0;
  }
  /deep/ .van-cell.van-switch-cell {
    margin-top: 10px;
  }
  /deep/ .van-field .van-cell__title {
    display: none;
  }
  /deep/ textarea.van-field__control {
    min-height: 50px;
  }
}
</style>
